﻿<script setup lang="ts" name="SystemLog">
import { getSystemLogList } from '@/api/systemLog'
const pageData:any = ref({
  listData: {
    total: 0,
    data: []
  },
  searchData: {
    date: '',
    account: '',
    module: '',
    ip: ''
  }
})
const pageIndex = ref(1)
const pageSize = ref(20)

// 页面数据条数改变重新获取数据
const handleSizeChange = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1
  getInitData()
}
// 当前页改变重新获取数据
const handleCurrentChange = (val: number) => {
  pageIndex.value = val
  getInitData()
}
// 重置页面数据
const resetPageData = () => {
  pageData.value.listData.data = []
  pageData.value.listData.total = 0
}
// 获取当前查询条件下的数据
const getInitData = () => {
  resetPageData()
  const result: any = {}
  result.pageIndex = pageIndex.value
  result.pageSize = pageSize.value
  result.date = pageData.value.searchData.date
  result.account = pageData.value.searchData.account
  result.module = pageData.value.searchData.module
  result.ip = pageData.value.searchData.ip
  getSystemLogList(result, { config: { showLoading: false, mockEnable: true } }).then((res:any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      setTimeout(() => {
        pageData.value.listData.data = res.data
        pageData.value.listData.total = res.total
      }, 1000)
    }
  })
}
// 查询条件重置
const resetSearch = () => {
  pageData.value.searchData.title = ''
  pageData.value.searchData.status = 1
  getInitData()
}

onMounted(() => {
  getInitData()
})
</script>

<template>
  <page-wrap direction="column">
    <el-form :inline="true">
      <el-form-item>
        <el-date-picker v-model="pageData.searchData.date" type="datetimerange" :range-separator="$t('page.至')" :start-placeholder="$t('page.开始时间')" :end-placeholder="$t('page.结束时间')" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="pageData.searchData.account" :placeholder="$t('placeholders.请输入') + $t('page.操作账号')" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="pageData.searchData.module" :placeholder="$t('placeholders.请输入') + $t('page.请求模块')" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="pageData.searchData.ip" :placeholder="$t('placeholders.请输入') + $t('page.请求ip')" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getInitData">{{ $t('buttons.buttonSearch') }}</el-button>
        <el-button icon="Refresh" @click="resetSearch">{{ $t('buttons.buttonReset') }}</el-button>
      </el-form-item>
    </el-form>
    <div class="flex-1 table-layout">
      <div class="table-wrap">
        <el-table :data="pageData.listData.data" border>
          <el-table-column type="index" :label="$t('page.序号')" width="60" />
          <el-table-column prop="account" :label="$t('page.操作账号')" width="130" />
          <el-table-column prop="module" :label="$t('page.请求模块')" width="130" />
          <el-table-column prop="api" :label="$t('page.请求地址')" />
          <el-table-column prop="ip" :label="$t('page.ip地址')" width="140" />
          <el-table-column prop="date" :label="$t('page.操作时间')" width="180" />
        </el-table>
      </div>
    </div>
    <el-pagination
      v-if="pageData.listData.total>0"
      v-model:currentPage="pageIndex"
      v-model:page-size="pageSize"
      :page-sizes="[20, 40, 80, 120]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.listData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </page-wrap>
</template>

<style scoped lang="scss">
.table-layout{
  position: relative;
  margin: var(--el-space) 0 0;

  .table-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-table{
      width: 100%;
      height: 100%;
    }
  }
}

.el-pagination{
  align-items: center;
  justify-content: flex-end;
  margin: var(--el-space) 0 0;
}
</style>
